import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: root
    
    property int animationDuration: 800
    property int autoRotationInterval: 2000
    property bool autoRotationEnabled: true  // 是否启用自动轮播（切换按钮控制）
    property bool isRunning: false  // 是否正在运行（开始/停止按钮控制）
    
    property int currentIndex: 3  // 中心索引
    property int offset: 4  // 旋转偏移量（初始为4，确保中心位置显示项目1）
    
    // 7个图片项的数据（固定顺序）
    // 图片路径：将图片放在 entry/src/main/cpp/images/ 目录下
    // 图片命名：image1.png, image2.png, ..., image7.png
    readonly property var itemData: [
        { image: "qrc:/images/image1.png", text: "项目 1", color: "#FF6B6B" },
        { image: "qrc:/images/image2.png", text: "项目 2", color: "#4ECDC4" },
        { image: "qrc:/images/image3.png", text: "项目 3", color: "#45B7D1" },
        { image: "qrc:/images/image4.png", text: "项目 4", color: "#FFA07A" },
        { image: "qrc:/images/image5.png", text: "项目 5", color: "#98D8C8" },
        { image: "qrc:/images/image6.png", text: "项目 6", color: "#F7DC6F" },
        { image: "qrc:/images/image7.png", text: "项目 7", color: "#BB8FCE" }
    ]
    
    // 根据偏移量计算实际显示的项
    function getItem(index) {
        var actualIndex = (index + offset) % itemData.length
        return itemData[actualIndex]
    }
    
    // 布局配置：7个位置的相对比例
    readonly property var layouts: [
        { x: 0.22, y: 0.28, width: 0.15, height: 0.375, z: 1, opacity: 0.4 },   // 左3
        { x: 0.075, y: 0.25, width: 0.162, height: 0.425, z: 2, opacity: 0.6 }, // 左2
        { x: 0.212, y: 0.19, width: 0.212, height: 0.545, z: 3, opacity: 0.8 }, // 左1
        { x: 0.4, y: 0.1, width: 0.28, height: 0.72, z: 4, opacity: 1.0 },     // 中心
        { x: 0.66, y: 0.19, width: 0.212, height: 0.545, z: 3, opacity: 0.8 },  // 右1
        { x: 0.85, y: 0.25, width: 0.162, height: 0.425, z: 2, opacity: 0.6 },   // 右2
        { x: 0.695, y: 0.28, width: 0.15, height: 0.375, z: 1, opacity: 0.4 }    // 右3
    ]
    
    function rotateToNext() {
        offset = (offset + 1) % itemData.length
        currentIndex = (currentIndex + 1) % itemData.length
    }
    
    function rotateToPrevious() {
        offset = (offset - 1 + itemData.length) % itemData.length
        currentIndex = (currentIndex - 1 + itemData.length) % itemData.length
    }
    
    function startAutoRotation() {
        // 开始播放：直接开始播放，一直循环
        isRunning = true
    }
    
    function stopAutoRotation() {
        // 停止播放：直接停止播放
        isRunning = false
    }
    
    // 自动轮播定时器（只要运行时就开始播放，一直循环）
    Timer {
        id: autoRotationTimer
        interval: root.autoRotationInterval
        running: root.isRunning  // 只检查是否运行，不检查开关状态
        repeat: true
        onTriggered: {
            // 切换到下一个，一直循环
            root.rotateToNext()
        }
    }
    
    Repeater {
        model: root.itemData.length
        
        Item {
            id: itemContainer
            property int itemIndex: index
            property var layout: root.layouts[index]
            property real itemScale: layout.z === 4 ? 1.0 : (0.7 + layout.z * 0.1)
            
            x: layout.x * root.width
            y: layout.y * root.height
            width: layout.width * root.width
            height: layout.height * root.height
            z: layout.z
            opacity: layout.opacity
            scale: itemScale
            
            transformOrigin: Item.Center
            
            Behavior on x {
                NumberAnimation {
                    duration: root.animationDuration
                    easing.type: Easing.OutCubic
                }
            }
            
            Behavior on y {
                NumberAnimation {
                    duration: root.animationDuration
                    easing.type: Easing.OutCubic
                }
            }
            
            Behavior on width {
                NumberAnimation {
                    duration: root.animationDuration
                    easing.type: Easing.OutCubic
                }
            }
            
            Behavior on height {
                NumberAnimation {
                    duration: root.animationDuration
                    easing.type: Easing.OutCubic
                }
            }
            
            Behavior on opacity {
                NumberAnimation {
                    duration: root.animationDuration
                    easing.type: Easing.OutCubic
                }
            }
            
            Behavior on scale {
                NumberAnimation {
                    duration: root.animationDuration
                    easing.type: Easing.OutCubic
                }
            }
            
            Rectangle {
                id: itemRect
                anchors.fill: parent
                property var currentItem: root.getItem(index)
                color: currentItem.color
                border.color: layout.z === 4 ? "#FFFFFF" : "#333333"
                border.width: layout.z === 4 ? 3 : 2
                radius: 8
                
                // 图片显示
                Image {
                    id: itemImage
                    anchors.fill: parent
                    anchors.margins: 2
                    source: itemRect.currentItem ? itemRect.currentItem.image : ""
                    fillMode: Image.PreserveAspectCrop
                    smooth: true
                    asynchronous: false
                    cache: true
                    
                    // 调试输出
                    Component.onCompleted: {
                        console.log("Image Component.onCompleted - index:", index, "source:", itemRect.currentItem ? itemRect.currentItem.image : "null", "Status:", status)
                    }
                    
                    onSourceChanged: {
                        console.log("Image source changed - index:", index, "new source:", source)
                    }
                    
                    onStatusChanged: {
                        console.log("Image status changed - index:", index, "source:", source, "Status:", status, "Error:", status === Image.Error)
                        if (status === Image.Error) {
                            console.log("Image load error for index:", index, "source:", source)
                            itemRect.color = itemRect.currentItem ? itemRect.currentItem.color : "#CCCCCC"
                        } else if (status === Image.Ready) {
                            console.log("Image loaded successfully - index:", index, "source:", source)
                            itemRect.color = "transparent"
                        } else if (status === Image.Loading) {
                            console.log("Image loading - index:", index, "source:", source)
                        }
                    }
                }
                
                // 文字标签（图片加载失败时显示，或者作为占位符）
                Text {
                    id: itemText
                    anchors.centerIn: parent
                    text: currentItem ? currentItem.text : ""
                    font.pixelSize: Math.min(parent.width, parent.height) * 0.15
                    font.bold: true
                    color: "#FFFFFF"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    visible: !itemImage.source || itemImage.status === Image.Error || itemImage.status === Image.Null
                    z: 10  // 确保文字在图片上方
                    
                    // 文字阴影效果
                    style: Text.Outline
                    styleColor: "#80000000"
                }
                
                // 颜色变化动画（用于背景色）
                Behavior on color {
                    ColorAnimation {
                        duration: root.animationDuration
                        easing.type: Easing.OutCubic
                    }
                }
                
                // 监听 offset 变化，更新内容
                Connections {
                    target: root
                    function onOffsetChanged() {
                        var newItem = root.getItem(index)
                        itemRect.currentItem = newItem
                        console.log("Offset changed, new item:", newItem.image, "for index:", index)
                    }
                }
                
                // 初始化时输出调试信息
                Component.onCompleted: {
                    console.log("Item initialized, index:", index, "image:", currentItem.image)
                }
            }
            
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    // 点击后跳转到该项
                    var targetIndex = index
                    var centerIndex = Math.floor(root.itemData.length / 2)
                    var diff = targetIndex - centerIndex
                    
                    if (diff > 0) {
                        for (var i = 0; i < diff; i++) {
                            root.rotateToNext()
                        }
                    } else if (diff < 0) {
                        for (var i = 0; i < -diff; i++) {
                            root.rotateToPrevious()
                        }
                    }
                }
                onEntered: {
                    // 悬停时暂停播放
                    if (root.isRunning) {
                        root.isRunning = false
                    }
                }
                onExited: {
                    // 离开时恢复播放（如果自动轮播已启用）
                    if (root.autoRotationEnabled) {
                        root.isRunning = true
                    }
                }
            }
        }
    }
}

